<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>加密</title>
</head>
<script src="https://npmcdn.com/jsencrypt@2.3.1/bin/jsencrypt.js"></script>

<style>
    input.mui-switch {
        width: 5em;
        height: 2.5em;
        position: relative;
        border: 1px solid #dfdfdf;
        background-color: #fdfdfd;
        box-shadow: #dfdfdf 0 0 0 0 inset;
        border-radius: 2.5em;
        background-clip: content-box;
        display: inline-block;
        -webkit-appearance: none;
        user-select: none;
        outline: none;
    }

    .mui-switch:before {
        content: '';
        width: 2.5em;
        height: 2.5em;
        position: absolute;
        top: 0px;
        left: 2.5em;
        border-radius: 2.5em;
        background-color: #65C886;
        box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    }

    .mui-switch:checked:before {
        left: 0em;
    }

    .mui-switch.mui-switch-anim {
        transition: border cubic-bezier(0, 0, 0, 1) 0.6s, box-shadow cubic-bezier(0, 0, 0, 1) 0.6s;
    }

    .mui-switch.mui-switch-anim:before {
        transition: left 0.5s;
    }

    .mui-switch.mui-switch-anim:checked {
        box-shadow: #64bd63 0 0 0 16px inset;
        background-color: #64bd63;
        transition: border ease 0.6s, box-shadow ease 0.6s, background-color ease 1.2s;
    }

    .mui-switch.mui-switch-anim:checked:before {
        transition: left 0.5s;
    }
</style>
<style>
    span.cell {
        height: 40px;
        vertical-align: middle;
        display: inline-block;
        line-height: 40px;
        font-size: 20px;
        color: #65C886;
    }
</style>
<body>

<h1 style="text-align: center">RSA加密工具</h1>
<div style="padding: 50px;margin:0 auto;width:960px;border:1px solid darksalmon;text-align:left;word-wrap:break-word; word-break:break-all;">
    <h2>
        <P>
            公钥：<input id="pKeyInput"
                      value="MIGfMA0GCSqGSIb3DQEBAQUAA4GNADCBiQKBgQCmpIuhT5SqCZkTa01x+Ced2P5WCVhafA33DC/Mwi645HaVeYKLP6soACehqtHbhHRYvPmvel+sEva64ligoeQs0X6KBRxBi2Yzom7nlpEqWlt1EkjG2e0/YuX0+QZ/EjIvBlCnPP9/QLmQw4jPXDS2PuMt4WENGxlZnTOA9L+d/QIDAQAB">
        </P>
        <p>
            明文：<input id="mWenInput">
        </p>
        <p>
<span class="cell">
  <label>添加日期</label>
</span>
            <span class="cell">
  <input class="mui-switch" type="checkbox" id="addDateInput" checked="false">
</span>
        </p>

        <button style="width:60px;height:30px;" onclick="genClick()">加密</button>
        <p></p>
        <b>结果：</b>
    </h2>
    <p id="cipherTextP"></p>
</div>
<script>
    /**
     * 点击按钮加密
     */
    function genClick() {
        var jsEncrypt = new JSEncrypt();
        jsEncrypt.setPublicKey(document.getElementById("pKeyInput").value);//读取和设置公钥
        var ciphText = jsEncrypt.encrypt(document.getElementById("mWenInput").value);//生成密文
        document.getElementById("cipherTextP").innerText = ciphText;
        console.log(ciphText);
    }

    var switcher = document.getElementById("addDateInput");
    switcher.onclick = function () {//日期开关
        var formatDate = "_" + MomentUtil.moment("yyyy-MM-dd", new Date());
        var clearText = document.getElementById("mWenInput").value;
        console.log(this.checked);
        if (this.checked) {//关掉
            if (clearText.endWith(formatDate)) {
                var endIndex = clearText.length - formatDate.length;
                if (endIndex >= 0) {
                    clearText = clearText.substring(0, endIndex);
                }
            }

        }
        else {//如果现在是关掉状态，设置日期，function执行之后会自动on
            clearText += formatDate;
        }
        document.getElementById("mWenInput").value = clearText;
    }
    //字符串是否以xxx结尾
    String.prototype.endWith = function (endStr) {
        var d = this.length - endStr.length;
        return (d >= 0 && this.lastIndexOf(endStr) == d)
    }


    var MomentUtil = (function () {

        return {
            moment(fmt, date) { //author: meizz
                var o = {
                    "M+": date.getMonth() + 1,                 //月份
                    "d+": date.getDate(),                    //日
                    "h+": date.getHours(),                   //小时
                    "m+": date.getMinutes(),                 //分
                    "s+": date.getSeconds(),                 //秒
                    "q+": Math.floor((date.getMonth() + 3) / 3), //季度
                    "S": date.getMilliseconds()             //毫秒
                };
                if (/(y+)/.test(fmt))
                    fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
                for (var k in o)
                    if (new RegExp("(" + k + ")").test(fmt))
                        fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
                return fmt;
            }
        }
    }());

</script>
</body>
</html>
